<template>
	<view>
		<view class="top">
			<view class="left">
				<view class="flex">
					<view class="name">{{data.userInfo.name}}</view>
					<view class="t1">第{{data.userInfo.meeting_num}}期会员</view>
					<view class="t2">
						{{getname('circle_level',data.userInfo.circle_level_id)}}
					</view>
				</view>
				<view class="tt1 flex">
					<image src="/static/ll.png" mode=""></image>
					{{data.userInfo.company_name}}
				</view>
				<view class="tt2">
					手机号：<text>{{data.userInfo.mobile}}</text>
				</view>
				<view class="tt2">
					微信号：<text>{{data.userInfo.wechat}}</text>
				</view>
			</view>
			<view class="image">
				<image src="/static/tt.png" mode=""></image>
				<view class="ads">
					<view class="text">
						{{getname('circle_type',data.userInfo.circle_type_id)}}
					</view>
					<image class="img" :src="data.userInfo.avatar_text" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<view class="conten">
			<view class="title">
				其他信息
			</view>
			<view class="items">
				<view class="lefttext">
					办公地点：
				</view>
				<view class="rigtext">
					{{data.userInfo.address}}
				</view>
			</view>
			<view class="items">
				<view class="lefttext">
					业务介绍：
				</view>
				<view class="rigtext">
					{{data.userInfo.info}}
				</view>
			</view>
			<view class="items">
				<view class="lefttext">
					行业分类：
				</view>
				<view class="rigtext" v-if="data.userInfo.circle_industry_id">
					{{getname('circle_industry',data.userInfo.circle_industry_id)}}
				</view>
			</view>
			<view class="items">
				<view class="lefttext">
					业务标签：
				</view>
				<view class="tip">
					<view class="ii" v-for="item in data.lis1" :key="index">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<view class="btn1" v-if="data.userInfo.status ==0">
			正在审核中
		</view>
		<view v-else class="btn" @click="$pageGo('/pages/user/setapply')">
			<uni-icons type="compose" size="20" color="#979797"></uni-icons>
			去编辑
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		getcircle,
		getdict
	} from '@/common/http.api.js';
	import {
		reactive,
		ref,
		computed
	} from 'vue';
	const getname = computed(() => {
		return (tiplist, tipid) => {
			if (data.ulist[tiplist]) {
				return data.ulist[tiplist].find(item => {
					return item.id === tipid
				}).name
			}
		}
	})
	const data = reactive({
		userInfo: {},
		ulist: {},
		lis1:[]
	})
	onShow(()=>{
		getcircle().then(ress => {
			if (ress.code == 1) {
				data.userInfo = ress.data
				getdict({
					type: 'circle'
				}).then(res => {
					data.ulist = res.data
					getlist()
				})
			}
		})
	})
	// onLoad(() => {

	// 	getcircle().then(ress => {
	// 		if (ress.code == 1) {
	// 			data.userInfo = ress.data
	// 			getdict({
	// 				type: 'circle'
	// 			}).then(res => {
	// 				data.ulist = res.data
	// 				getlist()
	// 			})
	// 		}
	// 	})
	// })

	function getlist() {
		let list = data.userInfo.tags.split(',')
		data.ulist.circle_tag.forEach(item => {
			if(list.find(value => value == item.id)){
				data.lis1.push(item.name)
			}
		})
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(90deg, #E5F8FF 0%, #FFF3F8 100%);
	}

	.top {
		width: 670rpx;
		height: 320rpx;
		background: linear-gradient(270deg, #DEEAFF 0%, #FFFFFF 50%, #DEEAFF 100%);
		box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(82, 159, 248, 0.3), inset 0rpx 0rpx 14rpx 8rpx rgba(255, 255, 255, 0.5);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid #FFFFFF;
		margin: 20rpx auto;
		position: relative;
		display: flex;

		.image {
			position: absolute;
			width: 228rpx;
			height: 292rpx;
			right: 20rpx;

			image {
				width: 228rpx;
				height: 292rpx;
			}

			.ads {
				position: absolute;
				width: 228rpx;
				height: 292rpx;
				top: 0%;
				padding: 24rpx;
				box-sizing: border-box;
				text-align: center;

				.text {
					text-align: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 22rpx;
					color: #0756FF;
					margin-top: 12rpx;
				}

				.img {
					border: 2px solid #fff;
					width: 100rpx;
					height: 100rpx;
					border-radius: 54rpx;
					margin: 40rpx auto;
				}
			}
		}

		.left {
			padding: 38rpx 20rpx;

			.name {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #000000;
			}

			.t1 {
				height: 40rpx;
				background: linear-gradient(223deg, #FFC393 0%, #FFE9D9 100%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1px solid #F9B781;
				padding: 0rpx 10rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 20rpx;
				color: #8A3E00;
				text-align: center;
				line-height: 40rpx;
				margin-left: 15rpx;
			}

			.t2 {
				margin-left: 15rpx;
				height: 40rpx;
				background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFACAC 100%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1px solid #FF90A8;
				padding: 0rpx 10rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 20rpx;
				color: #FF2352;
				text-align: center;
				line-height: 40rpx;
			}
		}

		.tt1 {
			height: 36rpx;
			background: #FFFFFF;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			color: #0756FF;
			margin: 24rpx auto;
			padding: 0rpx 10rpx;
			box-sizing: border-box;

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.tt2 {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 26rpx;
			color: #A6AABF;
			line-height: 30rpx;
			margin-bottom: 24rpx;

			text {
				color: #0756FF;
			}
		}
	}

	.conten {
		width: 670rpx;
		margin: 20rpx auto;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}

		.items {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			display: flex;
			margin: 36rpx auto;

			.lefttext {
				width: 140rpx;
				font-size: 28rpx;
				color: #A6AABF;
			}

			.rigtext {
				flex: 1;
				font-size: 28rpx;
				color: #000000;
			}

			.tip {
				flex: 1;
				display: flex;
				flex-wrap: wrap;

				.ii {
					height: 48rpx;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					border: 1px solid #0756FF;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #0756FF;
					line-height: 48rpx;
					padding: 0rpx 10rpx;
					text-align: center;
					margin-right: 15rpx;
					margin-bottom: 15rpx;
				}
			}
		}
	}

	.btn {
		width: 310rpx;
		height: 80rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 1px solid #E4E4EA;
		margin: 100rpx auto;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #979797;
		line-height: 80rpx;
		text-align: center;
	}
	.btn1{
		width: 310rpx;
		height: 80rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		background: #0756FF;
		margin: 100rpx auto;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 80rpx;
		text-align: center;
	}
</style>